<template>
  <h2>计算属性</h2>
  <p>count: {{ count }} - <button @click="add">+</button></p>
  <p>doubleCount: {{ doubleCount }}</p>

  <hr />

  <ul>
    <li v-for="item in oddArr" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
// computed函数用于做计算属性
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(3);
    const add = () => {
      count.value++;
    };
    // computed执行的时候，里面传入一个回调函数
    // 回调函数需要return, 有一个返回值，返回值就是可以用的计算属性
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    const arr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]);
    const oddArr = computed(() => {
      return arr.value.filter((item) => item % 2);
    });

    // 只有在template里面使用的变量才需要return
    return { count, add, doubleCount, oddArr };
  },
};
</script>
